<template>
  <a-card :bordered="false" :bodyStyle="{'padding':studentID?'0':'24px'}">
    <div v-if="!studentID">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="订单号:">
                <a-input
                  v-model="order_no"
                  placeholder="搜索订单号(回车搜索)"
                  style="width:80%;"
                  @pressEnter="updateTable"
                >
                  <a-tooltip slot="suffix" title="请搜索订单号">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="updateTable" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索学员:">
                <a-input
                  v-model="student_keywords"
                  placeholder="搜索学员/手机号(回车搜索)"
                  style="width:80%;"
                  @pressEnter="updateTable"
                >
                  <a-tooltip slot="suffix" title="请搜索学员">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="updateTable" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>

            <!-- 购买项目 -->
            <a-col :md="8" :sm="24">
              <a-form-item label="购买项目:">
                <a-input
                  v-model="content_name"
                  placeholder="输入项目名称(回车搜索)"
                  style="width:80%;"
                  @pressEnter="updateTable"
                >
                  <a-tooltip slot="suffix" title="请搜索项目">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="updateTable" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <!-- 订单类型 -->

            <div v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="订单类型:">
                  <!-- <a-checkbox @change="handleChange2">仅欠费订单</a-checkbox> -->
                  <a-select
                    style="width:80%"
                    v-model="queryParam.order_type"
                    placeholder="请选择"
                    allowClear
                  >
                    <a-select-option :value="1">报名</a-select-option>
                    <a-select-option :value="5">转课</a-select-option>
                    <a-select-option :value="4">退课</a-select-option>
                    <a-select-option :value="3">退物品</a-select-option>
                    <a-select-option :value="2">退费用</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="是否欠费:">
                  <!-- <a-checkbox @change="handleChange2">仅欠费订单</a-checkbox> -->
                  <a-select
                    style="width:80%"
                    v-model="queryParam.is_arrears"
                    placeholder="请选择"
                    allowClear
                  >
                    <a-select-option :value="1">是</a-select-option>
                    <a-select-option :value="2">否</a-select-option>
                  </a-select>
                </a-form-item> 
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="创建时间">
                  <a-range-picker
                    @change="handleChangeCreated"
                    style="width:80%;"
                    :disabled-date="disabledDate"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="支付时间">
                  <a-range-picker
                    :disabled-date="disabledDate"
                    :disabled-time="disabledRangeTime"
                    @change="handleChangePay"
                    format="YYYY-MM-DD"
                    style="width:80%;"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="业绩归属人:">
                  <a-select
                    v-model="queryParam.user_id"
                    allowClear
                    placeholder="请选择业绩归属人"
                    style="width:80%;"
                  >
                    <a-select-option
                      v-for="(item,index) in subjectList"
                      :key="index"
                      :value="item.id"
                    >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="支付状态:">
                  <a-select
                    @change="handerPayStatus"
                    mode="multiple"
                    placeholder="请选择"
                    style="width:80%"
                    allowClear
                  >
                    <a-select-option :value="1">待补交</a-select-option>
                    <a-select-option :value="2">已支付</a-select-option>
                    <a-select-option :value="4">已作废</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="是否有手续费/亏损费:">
                  <a-select
                    placeholder="请选择"
                    v-model="queryParam.type"
                    style="width:80%"
                    allowClear
                  >
                    <a-select-option :value="2">有手续费</a-select-option>
                    <a-select-option :value="3">有亏损费</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="是否有坏账:">
                  <a-select
                    placeholder="请选择"
                    v-model="queryParam.has_bad_debt"
                    style="width:80%"
                    allowClear
                  >
                    <a-select-option :value="1">有坏账</a-select-option>
                    <a-select-option :value="2">无坏账</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="经办日期">
                  <a-range-picker
                    :disabled-date="disabledDate"
                    @change="handleChangeOperator"
                    style="width:80%;"
                  />
                </a-form-item>
              </a-col>

              <a-col :md="8" :sm="24"> 
                <a-form-model-item label="所在校区：">
                  <a-select v-model="queryParam.structures_id" placeholder="请选择校区" allowClear style="width: 80%">
                    <a-select-option v-for="(item, index) in structureList" :key="index" :value="item.id">{{
                      item.name
                    }}</a-select-option>
                  </a-select>
                </a-form-model-item> 
              </a-col>

            </div>
          </a-row>
        </a-form>
      </div>
      <a style="cursor:pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor:pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a> 
      <div>
        <a-button @click="exportOrder">导出</a-button>
        <a-button :disabled="selectedRowKeys.length == 0" @click="voidOrder_visible = true" class="t-margin-l1">批量作废</a-button>
      </div>

      <a-alert
        type="warning"
        style="margin-bottom:15px;padding:5px 15px; border:none;"
        class="expand_warning"
      >
        <span slot="description">
          <span>
            实收总计
            <span style="margin:5px;color:red;">{{ countdata.real_price_count }}</span>元
          </span>
          <span style="margin:0 16px;">
            欠费总计
            <span style="margin:5px;color:red;">{{ countdata.arrears }}</span>元
          </span>
          <span>
            坏账
            <span style="margin:5px;color:red;">{{ countdata.bad_debt }}</span>元
          </span>
          <!-- <span style="margin-right:5px;">实收总计</span>
        <span style="margin-right:15px;">￥{{countdata.real_price_count}}</span>
        <span style="margin-right:5px;">欠费总计</span>
        <span style="margin-right:15px;">￥{{countdata.arrears}}</span>
        <span style="margin-right:5px;">坏账</span>
          <span style="margin-right:15px;">￥{{countdata.bad_debt}}</span>-->
        </span>
      </a-alert>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :scroll="{ x: 2000 }"
      :rowSelection="rowSelection"
      class="user_management_table"
      :pagination="pagination"
    >
      <span slot="order_no" slot-scope="text, record">
        <a @click="godetailes(record.id)">{{ text }}</a>
      </span>
      <span slot="student" slot-scope="text, record">
        <div>{{ record.student.name }}</div>
        <div>{{ record.student.main_phone }}</div>
      </span>
      <div slot="order_type" slot-scope="text, record">
        <span v-if="record.order_type==1">报名</span>
        <span v-if="record.order_type==2">退费用</span>
        <span v-if="record.order_type==3">退物品</span>
        <span v-if="record.order_type==4">退课</span>
        <span v-if="record.order_type==5">转课</span>
      </div>
      <span slot="buy_project" slot-scope="text, record">
        <span v-if="record.order_type==5">
          <span>
            <a-tooltip placement="topLeft" v-if="record.refunds!=''">
              <template slot="title">
                <div>
                  转出：
                  <span v-for="(item,index) in record.refunds" :key="index">
                    <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
                    <span v-if="item.total_amount">{{ item.total_amount }} 元</span>
                  </span>
                </div>
                <div>
                  转入：
                  <span v-for="(item,index) in record.orderContent" :key="index">
                    <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
                    <span v-if="item.signing_price">{{ item.signing_price }} 元</span>
                  </span>
                </div>
              </template>
              <span>
                转出：
                <span v-for="(item,index) in record.refunds" :key="index">
                  <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
                  <span v-if="item.total_amount">{{ item.total_amount }} 元</span>
                </span>
              </span>
              <br />
              <span>
                转入：
                <span v-for="(item,index) in record.orderContent" :key="index">
                  <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
                  <span v-if="item.signing_price">{{ item.signing_price }} 元</span>
                </span>
              </span>
            </a-tooltip>
          </span>
        </span>
        <div v-else class="onehidden">
          <a-tooltip placement="topLeft" v-if="record.orderContent!=''">
            <template slot="title">
              <span v-for="(item,index) in record.orderContent" :key="index">
                <p>
                  <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
                  <span v-if="item.signing_price">{{ item.signing_price }} 元</span>
                </p>
              </span>
            </template>
            <span v-for="(item,index) in record.orderContent" :key="index">
              <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
              <span v-if="item.signing_price">{{ item.signing_price }} 元</span>
            </span>
          </a-tooltip>
          <a-tooltip placement="topLeft" v-if="record.refunds!=''">
            <template slot="title">
              <span v-for="(item,index) in record.refunds" :key="index">
                <p>
                  <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
                  <span v-if="item.total_amount">{{ item.total_amount }} 元</span>
                </p>
              </span>
            </template>
            <span v-for="(item,index) in record.refunds" :key="index">
              <span v-if="item.project" style="margin:5px;">{{ item.project.name }}</span>
              <span v-if="item.total_amount">{{ item.total_amount }} 元</span>
            </span>
          </a-tooltip>
        </div>
      </span>
      <div slot="receivable" slot-scope="text, record">
        <span class="shoutag" v-if="record.bill_type==1">收</span>
        <span class="shoutag1" v-else>退</span>
        <span>￥{{ record.receivable }}</span>
      </div>
      <div slot="real_price" slot-scope="text, record">
        <span class="shoutag" v-if="record.bill_type==1">收</span>
        <span class="shoutag1" v-else>退</span>
        <span>￥{{ Number(record.real_price)-Number(record.bad_debt) }}</span>
      </div>
      <div slot="achievement" slot-scope="text, record">
        <span>{{ record.user_name||'-' }}</span>
      </div>
      <span slot="achievement" slot-scope="text, record">
        <!-- <span :title="record.user_name">{{record.user_name||'-'}}</span> -->
        <a-tooltip placement="topLeft">
          <template slot="title">{{ record.user_name }}</template>
          {{ record.user_name||'-' }}
        </a-tooltip>
      </span>
      <div slot="order_source" slot-scope="text,record">
        {{ record.source_type==1?'机构创建':'导入订单' }}
      </div>
      <!-- <a slot="action" slot-scope="text" href="javascript:;">删除</a> -->
      <!-- <span slot="orderHistory" slot-scope="text, record" v-for="(item,index) in record" :key="index">{{item.operator}}</span> -->
      <!-- <span slot="purchase_at1" slot-scope="text,record">
        <span>{{record.purchase_at|dayjs}}</span>
      </span> -->
      <!-- 支付时间 -->
      <span slot="purchase_at" slot-scope="text,record">
        <span>{{ record.purchase_at|dayjs }}</span>
      </span>
      <div slot="order_status" slot-scope="text,record">
        <!-- <span v-if="record.real_price-record.receivable<0" style="color: rgb(88, 183, 239);">待补交</span>
        <span v-else style="color: rgb(59, 189, 170);">已支付</span>-->
        <!-- <span v-else style="color: rgb(255, 133, 52);">待支付</span> -->
        <span v-if="record.payment_type==1">待补交</span>
        <span v-else-if="record.payment_type==2">已支付</span>
        <span v-else-if="record.payment_type==4">已废除</span>
        <span v-else>-</span>
      </div>
      <span slot="action" slot-scope="text,record">
        <span v-if="record.payment_type!==4">
          <span v-if="Number(record.real_price)<Number(record.receivable)">
            <a @click="goprint(record.id)">打印收据</a>
            <p style="margin-top:10px;">
              <a @click="gomoney(record)">继续收款</a>
            </p>
          </span>
          <a v-else @click="goprint(record.id)">打印收据</a>
        </span>
        <span v-else>-</span>
      </span>
    </s-table>

    <a-modal
        title="批量作废订单"
        :visible="voidOrder_visible"
        :confirm-loading="voidOrder_confirmLoading"
        @ok="voidOrder_handleOk('voidOrder_ruleForm')"
        @cancel="voidOrder_visible = false"
        cancelText="取消"
        okText="作废"
        width="550px"
      >
        <!-- :confirm-loading="voidOrder_confirmLoading" -->
        <a-alert type="info" message="学员信息录错可在学员详情页修改，业绩归属人、备注录错可在订单详情页直接修改，无需进行作废订单操作。" class="a-alert" banner />
        <a-form-model
          style="margin-top:20px;"
          ref="voidOrder_ruleForm"
          :model="voidOrderData"
          :rules="voidOrder_rules"
          :label-col="{span: 4 }"
          :wrapper-col="{span: 14}"
        >
          <a-form-model-item label="作废类型" prop="type">
            <a-select placeholder="请选择作废类型" v-model="voidOrderData.type">
              <a-select-option value="1">重复录入</a-select-option>
              <a-select-option value="2">信息填错</a-select-option>
              <a-select-option value="3">其他</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="作废原因">
            <a-input type="textarea" v-model="voidOrderData.reason" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>

    <after-pay ref="payed" @update="refreshList"></after-pay>
  </a-card>
</template>

<script>
import afterPay from '@/components/afterPay'
import { STable, Ellipsis } from '@/components'
import { orderList, ordersexport, ordercount, makeup ,abolishcontractMore} from '@/api/order'
import { accountList } from '@/api/account'
import { campusList } from '@/api/structure'
import moment from 'moment'
export default {
  name: 'OrderList',
  components: {
    STable,
    Ellipsis,
    afterPay
  },
  props: ['studentID'],
  data () {
    return {
      //作废订单
      voidOrderData: {
        type: undefined,
        reason: undefined,
        ids:[],
      },
      voidOrder_rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      voidOrder_visible:false,
      voidOrder_confirmLoading:false,
      selectedRowKeys: [],
      pagination: {
        showTotal: total => `共${total}条数据`
      },
      visible: false,
      confirmLoading1: false,
      btnStyle: [
        {
          type: 1,
          text: '支付宝',
          color: '#1890ff',
          icon: 'alipay-circle',
          check: false,
          price: 0
        },
        {
          type: 2,
          text: '微信',
          color: '#52c42a',
          icon: 'wechat',
          check: false,
          price: 0
        },
        {
          type: 3,
          text: '现金',
          color: '#FF7F24',
          icon: 'transaction',
          theme: 'filled',
          check: false,
          price: 0
        },
        {
          type: 4,
          text: '网银转账',
          color: '#1296db',
          icon: 'global',
          check: false,
          price: 0
        },
        {
          type: 5,
          text: 'POS机刷卡',
          color: '#39d63e',
          icon: 'credit-card',
          check: false,
          price: 0
        }
      ],
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      receiptList: {
        student: null,
        receivable: null,
        purchase_at: null,
        user: null,
        operator: null
      },
      today: moment(),
      orderInfo: {},
      form: {
        real_price_arr: [],
        // user_id: null,
        operator: this.$store.state.user.name,
        purchase_at: '',
        // remarks: null,
        real_price: 0,
        receivable: null
      },
      rules: {
        operator: [{ required: true, message: '请输入经办人', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      student: '',
      handled: '',
      followUpPerson: '',
      is_arrears: null,
      datevalue1: [],
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      countdata: {
        real_price_count: null,
        arrears: null,
        bad_debt: null
      },
      subjectList: [],
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      showDrawer: false,
      confirmLoading: false,
      schoolID: null,
      // 查询参数
      student_keywords: undefined,
      content_name: undefined,
      order_no: undefined,

      structureList: [], //校区列表
      // operator: '',
      queryParam: {
        school_id: this.$store.state.user.school,
        type_num: undefined,
        structures_id:undefined,
      },
      columns: [
        {
          title: '订单号',
          dataIndex: 'order_no',
          width: 230,
          fixed: 'left',
          scopedSlots: { customRender: 'order_no' }
        },
        {
          title: '学员/手机号',
          width: 130,
          fixed: 'left',
          scopedSlots: { customRender: 'student' }
        },

        {
          title: '订单类型',
          width: 100,
          fixed: 'left',
          scopedSlots: { customRender: 'order_type' }
        },
        {
          title: '所属校区',
          width: 150,
          dataIndex: 'structures.name',
          ellipsis: true
        },
        {
          title: '购买项目',
          width: 200,
          ellipsis: true,
          scopedSlots: { customRender: 'buy_project' }
        },
        {
          title: '应收/应退',
          dataIndex: 'receivable',
          scopedSlots: { customRender: 'receivable' },
          width: 130
        },
        {
          title: '实收/实退',
          dataIndex: 'real_price',
          scopedSlots: { customRender: 'real_price' },
          width: 130
        },
        {
          title: '订单来源',
          scopedSlots: { customRender: 'order_source' },
          width: 100
        },
        {
          title: '业绩归属人',
          align: 'center',
          scopedSlots: { customRender: 'achievement' },
          width: 102
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          width: 150
        },
        {
          title: '经办日期',
          scopedSlots: { customRender: 'purchase_at' },
          width: 150
        },
        {
          title: '最近支付时间',
          scopedSlots: { customRender: 'purchase_at' },
          width: 150
        },
        {
          title: '订单状态',
          scopedSlots: { customRender: 'order_status' },
          width: 86
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: (parameter) => {
        return orderList(
          Object.assign(parameter, this.queryParam, {
            order_no: this.order_no,
            student_keywords: this.student_keywords,
            content_name: this.content_name,
            student_id: this.studentID || undefined
          })
        ).then((res) => {
          this.selectedRowKeys=[]
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  watch: {
    btnStyle: {
      handler (val) {
        let num = 0
        val.forEach((item) => {
          if (item.check == true) {
            num = num + Number(item.price)
          }
        })
        this.form.real_price = num.toFixed(2)
      },
      deep: true
    },
    content_name (val) {},
    queryParam: {
      handler (newName, oldName) {
        this.$refs.table.refresh()
        this.getcount()
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    }
  },
  computed: {
    rowSelection() {
      const _this = this
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
          this.selectedRowKeys = selectedRowKeys
        },
        getCheckboxProps: (record) => ({
         props: {
             // 全部默认禁止选中
             // disabled: true,
             // 某几项默认禁止选中(R: 当state等于1时)
             disabled: record.payment_type==4,
 　　　　　　　// 某几项默认选中(R: 当state等于1时) 
 　　　　　　　// defaultChecked: record.state == 1, 
  　　　　　}, 
  　　　　}), 
  　　　} 
  　　}, 
 },
  created () {
    campusList({
      school_id: this.$store.state.user.school,
      type: 1,
    }).then((res) => {
      this.structureList = res
    })
    accountList({
      is_on_job: 1,
      school_id: this.$store.state.user.school,
      pageSize: 999999
    })
      .then((res) => {
        this.subjectList = res.data
      })
      .catch((error) => {
        this.$message.error(err.data.message || '获取跟进人失败')
      })
    this.getcount()
  },
  methods: {
    changePage(){
      console.log(2222)
       this.selectedRowKeys =[]
    },
    //废除合同
    voidOrder_handleOk(formName) {
      this.voidOrderData.ids=this.selectedRowKeys
      this.voidOrder_confirmLoading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          abolishcontractMore(this.voidOrderData).then((res) => {
            // this.$forceUpdate()
            this.voidOrder_visible = false
            this.voidOrder_confirmLoading = false
            this.selectedRowKeys= []
            this.selectedRows=[]
            this.$message.success('废除成功')
            this.$refs.table.refresh()
          }).catch(err=>{
            if(err.data&&err.data.message){
              this.$message.error(err.data.message)
            }else{
              this.$message.error('操作失败，请重试~')
            }
          })
        } else {
          console.log('error submit!!')
          this.voidOrder_confirmLoading = false
          return false
        }
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 订单统计
    getcount () {
      if (!this.studentID) {
        ordercount(
          Object.assign(this.queryParam, {
            order_no: this.order_no,
            student_keywords: this.student_keywords,
            content_name: this.content_name
          })
        )
          .then((res) => {
            this.countdata = res
          })
          .catch((err) => {
            this.$message.error(err.data.message || '统计获取失败')
          })
      }
    },
    updateTable () {
      this.$refs.table.refresh(true)
      this.getcount()
    },
    // 导出
    exportOrder () {
      ordersexport(
        Object.assign(this.queryParam, {
          order_no: this.order_no,
          student_keywords: this.student_keywords,
          content_name: this.content_name
        })
      )
        .then((res) => {
          window.location.href = res.url.url + res.url.path
          this.$message.success('导出成功')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 支付状态
    handerPayStatus (e) {
      if (e.length == 0) {
        this.queryParam.type_num = undefined
      } else {
        this.queryParam.type_num = e
      }
    },
    //
    // 日期
    moment,
    handleChangeCreated (value, date) {
      this.queryParam.create_start_time = date[0]
      this.queryParam.create_end_time = date[1]
      this.$refs.table.refresh()
      this.getcount()
    },
    // 支付时间
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    handleChangePay (value, date) {
      this.queryParam.pay_start_time = date[0]
      this.queryParam.pay_end_time = date[1]
      this.$refs.table.refresh()
      this.getcount()
    },
    disabledRangeTime (_, type) {},
    handleChangeOperator (value, date) {
      this.datevalue1 = value
      this.queryParam.start_time = date[0]
      this.queryParam.end_time = date[1]
      this.$refs.table.refresh()
      this.getcount()
      // console.log(this.queryParam.start_time, `handleChange==== ${this.queryParam.end_time}`)
    },
    handlePanelChange (value, mode) {},
    handleChange2 (e) {
      if (`${e.target.checked}` == 'true') {
        this.queryParam.is_arrears = 1
      }
      if (`${e.target.checked}` == 'false') {
        this.queryParam.is_arrears = ''
      }
      this.$refs.table.refresh()
      this.getcount()
    },
    more () {
      this.advanced = !this.advanced
    },
    godetailes (id) {
      this.$router.push({
        name: 'orderdetails',
        query: {
          id: id
        }
      })
    },
    // 去打印
    goprint (id) {
      this.$router.push({
        name: 'receipt',
        query: {
          id: id
        }
      })
    },
    // 继续收款
    gomoney (res) {
      this.$refs.payed.showModal(res)
    },
    refreshList () {
      this.$refs.table.refresh()
    }
  }
}
</script>
<style lang="less" scoped>
.expand_warning {
  margin-top: 16px;
  background-color: #fff0e7;
  border-radius: 4px;
}
.btn_margin {
  margin-right: 10px;
}

.form_title {
  div {
    label {
      font-size: 16px !important;
    }
  }
}
#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
.paybox {
  padding-left: 20px;
}
.paycontent {
  display: flex;
  margin-left: 60px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.other-pay-type {
  margin-right: 12px;
  margin-bottom: 8px;
  width: 270px;
  display: inline-table;
}
.pay-type-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 12px;
  width: 270px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
.shoutag {
  display: inline-block;
  color: rgb(59, 189, 170);
  font-size: 12px;
  width: 16px;
  // height: 18px;
  line-height: 16px;
  border-radius: 3px;
  text-align: center;
  margin-right: 5px;
  border: 1px solid rgb(59, 189, 170);
}
.shoutag1 {
  display: inline-block;
  color: rgb(255, 79, 79);
  font-size: 12px;
  width: 16px;
  // height: 18px;
  line-height: 16px;
  border-radius: 3px;
  text-align: center;
  margin-right: 5px;
  border: 1px solid rgb(255, 79, 79);
}
.onehidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
}
</style>
